<template>
  <el-menu
    :class="['aside-navi', { collapsed: isCollapse }]"
    :collapse="isCollapse"
    background-color="#2d3647"
    text-color="#fff"
    router
    active-text-color="#ffd04b"
  >
    <!-- unique-opened -->
    <!-- 个人中心 -->
    <el-submenu index="1-1" v-if="menu.user === 'true'">
      <template slot="title">
        <i class="el-icon-menu"></i>
        <span solt="title">用户管理</span>
      </template>
      <el-menu-item index="/container/userList" @click="$emit('refresh')">
        <i class="el-icon-user-solid"></i>
        <span slot="title">用户信息</span>
      </el-menu-item>
      <el-menu-item index="/container/ident-audit" v-if="menu.audit === 'true'">
        <i class="el-icon-s-check"></i>
        <span slot="title">身份认证</span>
      </el-menu-item>
      <el-menu-item index="/container/carTeam" v-if="menu.carTeam === 'true'">
        <i class="el-icon-s-check"></i>
        <span slot="title">车队长认证</span>
      </el-menu-item>
    </el-submenu>
    <el-submenu index="2-1" v-if="menu.assets === 'true'">
      <template slot="title">
        <i class="el-icon-menu"></i>
        <span solt="title">资产管理</span>
      </template>
      <el-menu-item
        index="/container/transactionRecord"
        v-if="menu.trade == 'true'"
      >
        <i class="el-icon-money"></i>
        <span slot="title">交易记录</span>
      </el-menu-item>
      <el-menu-item
        index="/container/withdrawAudit"
        v-if="menu.audit_coin == 'true'"
      >
        <i class="el-icon-monitor"></i>
        <span slot="title">提币审核</span>
      </el-menu-item>
      <el-menu-item
        index="/container/withdrawConfig"
        v-if="menu.audit_coin == 'true'"
      >
        <i class="el-icon-turn-off"></i>
        <span slot="title">提币审核设置</span>
      </el-menu-item>
      <el-menu-item index="/container/accMonitor">
        <i class="el-icon-s-platform"></i>
        <span slot="title">账户监控</span>
      </el-menu-item>
      <el-menu-item
        index="/container/totalBalance"
        v-if="menu.balance == 'true'"
      >
        <i class="el-icon-coin"></i>
        <span slot="title">托管总余额</span>
      </el-menu-item>
    </el-submenu>
    <el-submenu index="3-1" v-if="menu.tokenManage === 'true'">
      <template slot="title">
        <i class="el-icon-menu"></i>
        <span solt="title">币种管理</span>
      </template>
      <el-menu-item
        index="/container/warehouse"
        v-if="$store.state.userInfo.group === 'administrator'"
      >
        <i class="el-icon-coin"></i>
        <span slot="title">币种库</span>
      </el-menu-item>
      <el-menu-item index="/container/manageToken">
        <i class="el-icon-circle-check"></i>
        <span slot="title">支持币种列表</span>
      </el-menu-item>
      <el-menu-item index="/container/starCoinCategory">
        <!-- v-if="$store.state.userInfo.group === 'administrator'" -->
        <i class="el-icon-s-order"></i>
        <span slot="title">推荐币种分类</span>
      </el-menu-item>
      <el-menu-item index="/container/starCoin">
        <!-- v-if="$store.state.userInfo.group === 'administrator'" -->
        <i class="el-icon-star-on"></i>
        <span slot="title">推荐币种列表</span>
      </el-menu-item>
      <el-menu-item index="/container/PriceSet" v-if="menu.priceSet == 'true'">
        <i class="el-icon-edit"></i>
        <span slot="title">币种行情设置</span>
      </el-menu-item>
      <el-menu-item index="/container/feeConfig" v-if="menu.fees === 'true'">
        <i class="el-icon-edit"></i>
        <span slot="title">托管手续费设置</span>
      </el-menu-item>
      <el-menu-item
        index="/container/gas"
        v-if="$store.state.userInfo.group === 'administrator'"
      >
        <i class="el-icon-edit"></i>
        <span slot="title">去中心化Gas设置</span>
      </el-menu-item>
    </el-submenu>
    <el-submenu index="4-1" v-if="menu.walletManage === 'true'">
      <template slot="title">
        <i class="el-icon-menu"></i>
        <span solt="title">钱包管理</span>
      </template>
      <el-menu-item index="/container/parallelManage">
        <i class="el-icon-s-order"></i>
        <span slot="title">平行链列表</span>
      </el-menu-item>
      <el-menu-item
        index="/container/parallelSupported"
        v-if="$store.state.userInfo.group === 'administrator'"
      >
        <i class="el-icon-s-order"></i>
        <span slot="title">主链支持列表</span>
      </el-menu-item>
      <el-menu-item index="/container/walletList">
        <i class="el-icon-s-order"></i>
        <span slot="title">钱包列表</span>
      </el-menu-item>
      <el-menu-item index="/container/legalCoin">
        <i class="el-icon-coin"></i>
        <span slot="title">计价货币</span>
      </el-menu-item>
    </el-submenu>
    <el-menu-item index="/container/fastToken" v-if="menu.onekey === 'true'">
      <i class="el-icon-menu"></i>
      <span slot="title">一键Token</span>
    </el-menu-item>
    <el-submenu index="5-1" v-if="menu.explorer === 'true'">
      <template slot="title">
        <i class="el-icon-menu"></i>
        <span solt="title">探索管理</span>
      </template>
      <el-menu-item index="/container/category">
        <i class="el-icon-s-operation"></i>
        <span slot="title">类别管理</span>
      </el-menu-item>
      <el-menu-item index="/container/application">
        <i class="el-icon-folder-opened"></i>
        <span slot="title">应用管理</span>
      </el-menu-item>
    </el-submenu>
    <el-submenu index="6-1" v-if="menu.news === 'true'">
      <template slot="title">
        <i class="el-icon-menu"></i>
        <span solt="title">快讯新闻</span>
      </template>
      <el-menu-item index="/container/news">
        <i class="el-icon-edit"></i>
        <span slot="title">快讯管理</span>
      </el-menu-item>
      <el-menu-item index="/container/article">
        <i class="el-icon-document"></i>
        <span slot="title">文章管理</span>
      </el-menu-item>
    </el-submenu>
    <el-submenu index="7-1" v-if="menu.call === 'true'">
      <template slot="title">
        <i class="el-icon-phone"></i>
        <span solt="title">随便打</span>
      </template>
      <el-menu-item index="/container/callfree">
        <i class="el-icon-edit"></i>
        <span slot="title">设置话费价格</span>
      </el-menu-item>
    </el-submenu>
    <el-submenu index="8-1" v-if="menu.live === 'true'">
      <template slot="title">
        <i class="el-icon-menu"></i>
        <span solt="title">直播管理</span>
      </template>
      <el-menu-item index="/container/liveAudit">
        <i class="el-icon-monitor"></i>
        <span slot="title">开播审核</span>
      </el-menu-item>
      <el-menu-item index="/container/liveName">
        <i class="el-icon-monitor"></i>
        <span slot="title">直播间名称审核</span>
      </el-menu-item>
      <el-menu-item index="/container/liveCategory">
        <i class="el-icon-s-order"></i>
        <span slot="title">直播分类</span>
      </el-menu-item>
      <el-menu-item index="/container/liveBanner">
        <i class="el-icon-picture"></i>
        <span slot="title">直播Banner管理</span>
      </el-menu-item>
    </el-submenu>
    <el-submenu index="9-1" v-if="menu.system === 'true'">
      <template slot="title">
        <i class="el-icon-menu"></i>
        <span solt="title">系统设置</span>
      </template>
      <el-menu-item
        index="/container/managers"
        v-if="
          ['administrator', 'admin'].includes($store.state.userInfo.group) &&
          menu.manager == 'true'
        "
      >
        <i class="el-icon-s-check"></i>
        <span slot="title">管理员设置</span>
      </el-menu-item>
      <el-menu-item index="/container/editPassword">
        <i class="el-icon-edit"></i>
        <span slot="title">修改密码</span>
      </el-menu-item>
    </el-submenu>
    <el-menu-item index="/container/banner" v-if="menu.banner === 'true'">
      <i class="el-icon-picture"></i>
      <span slot="title">Banner图管理</span>
    </el-menu-item>
    <el-menu-item
      index="/container/announcement"
      v-if="menu.message === 'true'"
    >
      <i class="iconfont iconnotice-fill"></i>
      <span slot="title">消息中心</span>
    </el-menu-item>
    <el-menu-item index="/container/flashChange" v-if="menu.flashEx === 'true'">
      <i class="iconfont iconduihuan"></i>
      <span slot="title">闪兑模块</span>
    </el-menu-item>
    <el-menu-item index="/container/log" v-if="menu.log === 'true'">
      <i class="el-icon-s-management"></i>
      <span slot="title">查看日志</span>
    </el-menu-item>
    <!-- <el-menu-item v-if="isgm" @click="linkTo('https://miner.ganma.co/admin')">
      <i class="el-icon-s-management"></i>
      <span slot="title">敢吗矿机</span>
    </el-menu-item> -->
    <el-menu-item
      v-if="isbbc"
      @click="linkTo('https://miner.snef.world/admin')"
    >
      <i class="el-icon-s-management"></i>
      <span slot="title">闪电矿机</span>
    </el-menu-item>
    <el-menu-item v-if="ispro" @click="linkTo('https://miner.gmpro.vip/admin')">
      <i class="el-icon-s-management"></i>
      <span slot="title">PRO矿机</span>
    </el-menu-item>
  </el-menu>
</template>

<script>
export default {
  name: "AsideNav",
  data: () => {
    return {
      screenWidth: document.body.clientWidth,
      timer: 0,
    };
  },
  computed: {
    isCollapse() {
      return this.screenWidth < 1550;
    },
    isgm() {
      return process.env.VUE_APP_TITLE === "GM云";
    },
    isbbc() {
      return process.env.VUE_APP_TITLE === "BBC";
    },
    ispro() {
      return process.env.VUE_APP_TITLE === "PRO云";
    },
    menu() {
      return {
        user: process.env.VUE_APP_USER,
        audit: process.env.VUE_APP_AUDIT,
        assets: process.env.VUE_APP_ASSETS,
        onekey: process.env.VUE_APP_ONEKEY,
        explorer: process.env.VUE_APP_EXPLORER,
        banner: process.env.VUE_APP_BANNER,
        message: process.env.VUE_APP_MESSAGE,
        flashEx: process.env.VUE_APP_FLASHEX || "false",
        tokenManage: process.env.VUE_APP_TOKENMANAGE || "false",
        walletManage: process.env.VUE_APP_WALLETMANAGE || "false",
        log: process.env.VUE_APP_LOG || "false",
        news: process.env.VUE_APP_NEWS || "false",
        call: process.env.VUE_APP_CALL || "false",
        carTeam: process.env.VUE_APP_CARTEAM || "false",
        system: process.env.VUE_APP_SYSTEM || "false",
        fees: process.env.VUE_APP_FEE,
        live: process.env.VUE_APP_BROADCAST || "false",
        audit_coin: process.env.VUE_APP_AUDIT_COIN,
        balance: process.env.VUE_APP_TOTALBALANCE,
        trade: process.env.VUE_APP_TRADE,
        manager: process.env.VUE_APP_MANAGER,
        priceSet: process.env.VUE_APP_PRICESET,
      };
    },
  },
  mounted() {
    // 监听窗口大小
    window.onresize = () => {
      return (() => {
        this.screenWidth = document.body.clientWidth;
      })();
    };
  },
  methods: {
    linkTo(url) {
      window.open(url);
    },
  },
};
</script>

<style scoped lang="scss">
.aside-navi {
  height: 100%;
  width: 200px;

  &.collapsed {
    width: auto;
  }

  .iconnotice-fill,
  .iconduihuan {
    margin-right: 5px;
    width: 24px;
    text-align: center;
    font-size: 24px;
    vertical-align: middle;
  }

  .iconduihuan {
    margin-right: 6px;
    font-size: 22px;
  }
}
</style>
